<template>
  <div>
    <tp-org :data="data" :width="1900" :btns="btns" hoverClass="hover-class" :propsKey="{label:'label',value:'value',children:'list'}"></tp-org>
    <el-dialog title="新增" width="300px" :visible.sync="addVisible">
      <el-form>
        <el-form-item label="标签">
          <el-input v-model="addForm.label" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="值">
          <el-input v-model="addForm.value" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TpOrg from '@/components/Index';
export default {
  components: { TpOrg },
  data() {
    return {
      addVisible: false,
      currentData: {},
      addForm: {
        label: '',
        value: ''
      },
      btns: [
        {
          label: '添加',
          icon: 'tp-icon-add-circle',
          callback: data => {
            this.addVisible = true;
            this.currentData = data;
          }
        },
        {
          label: '修改',
          icon: 'tp-icon-edit',
          callback: function () {
            console.log('eidt')
          }
        },
        {
          label: '查看',
          icon: 'tp-icon-browse',
          callback: function () {
            console.log('check')
          }
        },
        {
          label: '删除',
          icon: 'tp-icon-ashbin',
          color: 'red',
          callback: (data, parent) => {
            if (!parent) return; // parent === undefined 为 root
            const i = parent.list.findIndex(ch => ch === data);
            parent.list.splice(i, 1);
          }
        }
      ],
      data: {
        label: 'a',
        value: 'a',
        list: [
          // {
          //   label: 'b',
          //   value: 'b'
          // },
          // {
          //   label: 'c',
          //   value: 'c'
          // }
        ]
      }
    }
  },
  methods: {
    add() {
      if (this.currentData.list) {
        this.currentData.list.push(Object.assign({}, this.addForm));
      } else {
        this.$set(this.currentData, 'list', [Object.assign({}, this.addForm)])
      }
      this.addVisible = false;
    }
  }
}
</script>

<style>
.hover-class {
  /* background-color: red!important; */
}
</style>